<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>注册</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<link rel="stylesheet" type="text/css"
	href='<c:url value="/uikit-2.25.0/css/uikit.min.css"/>'>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src='<c:url value="/uikit-2.25.0/js/uikit.min.js"/>'></script>
<style type="text/css">
	p{
		margin:0px;
		opacity: 
	}
</style>
<script type="text/javascript">
 			$(function(){
 				//1.获取所有错误信息,循环遍历。调用showError来确定是否显示错误信息！
 				$(".errorClass").each(function(){
 					 showError($(this));
 				})
 				$(".text").focus(function(){
 					var labelId=$(this).attr("id")+"Error";//通过输入框找到对应的label的id
 					$("#"+labelId).text("");
 					showError($("#"+labelId))
 				})
 				$(".text").blur(function(){
 					var id=$(this).attr("id"); //获取当前输入框的id
 					//console.log(id.substring(0,1).toUpperCase());
 					//console.log("validate"+id.substring(0,1).toUpperCase()+id.substring(1))
 					var funName="validate"+id.substring(0,1).toUpperCase()+id.substring(1)+"()";
 					eval(funName);//执行函数调用
 				})
				$("#registForm").submit(function(){
 					var bool = true;//表示校验通过
 					if(!validateUsername()){
 						bool = false;
 					}
 					if(!validatePassword()){
 						bool = false;
 					}
 					if(!validateEmail()){
 						bool = false;
 					}
 					return bool;
 				})
 			});
 			
 			function showError(element){
 				var text=element.text(); //获取元素元素的内容
 				if(!text){//如果没有内容,就让他隐藏
 					element.css("display","none");
 				}else{	  //如果有内容,就让他显示
 					element.css({
 						"display":"",
 						"color":"red"
 					})
 				}
 			}
 			/*****************校验账号*********************/
			function validateUsername(){
 				var flag= true;
 				var id="username";
 				var value = $("#"+id).val(); //获取输入框的值
 				/*
 				 * 1.输入框的非空校验
 				 */
 				 if(!value){
 					 $("#"+id+"Error").text("用户名不能为空");
 					 showError($("#"+id+"Error"));	
 					 return false;
 				 }
 				/*
 			     * 2.长度校验
 				 */
 				 if(value.length<2||value.length>10){
 					 $("#"+id+"Error").text("用户名长度必须在2~10之间");
 					 showError( $("#"+id+"Error"));
 					 return false;
 				 }
 				/*
 				 * 3.非法字符校验
 				 */
 				 var illegal=["#","$","%","^","&","*","/","\\"];
				 for(var j = 0;j <illegal.length;j++){
					 if(illegal[j]==value){
						 $("#"+id+"Error").text("用户包含非法字符");
	 					 showError( $("#"+id+"Error"));
	 					 return false;
					 }
				 }
				 $.ajax({
					  url:'<c:url value="/userServlet"/>',
					  data:{
						  "method":"checkUserName",
						  "username":value
					  },
					  type:"POST",
					  dataType:"json",
					  async:true,
					  success:function(result){
						  flag = result;
						  console.log(flag);
						  if(!result){
							  $("#"+id+"Error").text("用户名已经存在");
							  showError($("#"+id+"Error"));
							  return flag;
						  }
						
					  }
				  });
				return flag;
 			} 		
			/*****************校验密码*********************/
 			function validatePassword(){
 				var id="password";
 				var value = $("#"+id).val(); //获取输入框的值
 				/*
 				 * 1.输入框的非空校验
 				 */
 				 if(!value){
 					 $("#"+id+"Error").text("密码不能为空");
 					 showError($("#"+id+"Error"));
 					 return false;
 				 }
 				/*
 			     * 2.长度校验
 				 */
 				 if(value.length<2||value.length>8){
 					 $("#"+id+"Error").text("用户名长度必须在2~8之间");
 					 showError( $("#"+id+"Error"));
 					 return false;
 				 }
 				return true
 			}
 			
 			
 			/*****************校验邮件*********************/
 			function validateEmail(){
 				var id="email";
 				var value = $("#"+id).val(); //获取输入框的值
 				/*
 				 * 1.输入框的非空校验
 				 */
 				 if(!value){
 					 $("#"+id+"Error").text("邮件不能为空");
 					 showError($("#"+id+"Error"));
 					 return false;
 				 }
 				var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
 				if(!reg.test(value)){
 					 $("#"+id+"Error").text("邮件格式错误~");
 					 showError($("#"+id+"Error"));
 					 return false;
 				}
 				return true;
 			}
 	</script>
</head>

<body>
		<div class="uk-grid">
			<div class="uk-width-3-10"></div>
			<div class="uk-width-2-5">
						<form action='<c:url value="/userServlet"/>' method="post" class="uk-form" id="registForm">
						
										<legend class="uk-text-center">注册</legend>
										<input type="hidden" name="method" value="regist"/>
								<div class="uk-form-row  uk-text-center">
								
									账号:<input type="text" name="username" value="" class="text" id="username"/><br/> 
									<p class="errorClass" id="usernameError"></p> 
								</div>
								<div class="uk-form-row  uk-text-center">
									密码:<input type="password" name="password" class="text" id="password" /><br />
									<p class="errorClass" id="passwordError"></p> 
								</div>
								<div class="uk-form-row  uk-text-center">
									邮件:<input type="text" name="email" value="" class="text" id="email" /><br />
									<p class="errorClass" id="emailError"></p> 
								</div>
								<div class="uk-form-row  uk-text-center">
						
									<input id="button" type="submit" value="注册 ">
								</div>		
						</form>
			</div>
			<div class="uk-width-3-10"></div>
		</div>

</body>

</html>
